﻿<template>
  <el-dialog :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '75%' class = 'main_dialog' @close = "closeDialog"
  :close-on-click-modal = 'false' :close-on-press-escape = 'false'>
    <div v-loading = 'loading'>
      <el-form :model = "parameter" ref = "ruleForm" label-width = '130' :rules =  'rules'>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label = "数据源名称：" prop="source">
              <el-select v-model = 'parameter.source' @change="changeSource">
                <el-option key="" label="请选择" value=""></el-option>
                <el-option key="_meta_" label="元数据" value="_meta_"></el-option>
                <el-option v-for = "(item, index) in sourceList" :key = 'index' :label = 'item.SourceName' :value = 'item.SourceName'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表名" prop="table">
              <el-select v-model = 'parameter.table' @change="changeTable">
                <el-option key="" label="请选择" value=""></el-option>
                <el-option v-for = "(item, index) in sourceObjectList" :key = 'index' :label = 'item.name' :value = 'item.name'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表别名" prop="as">
              <el-input v-model="parameter.as"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="栏位名称" prop="column">
              <el-select v-model = 'parameter.column'>
                <el-option key="" label="请选择" value=""></el-option>
                <el-option v-for = "(item, index) in columnList" :key = 'index' :label = 'item.name' :value = 'item.name'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参数名称" prop="param_name">
              <el-input v-model="parameter.param_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作指令" prop="action">
              <el-select v-model = 'parameter.action'>
                <el-option v-for = "(item, index) in actionList" :key = 'index' :label = 'item.label' :value = 'item.value'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="Join表达式" prop="join">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入Join表达式"
                v-model="parameter.join">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="过滤表达式" prop="filter">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入过滤表达式"
                v-model="parameter.filter">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="分组表达式" prop="group">
              <el-input v-model="parameter.group"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class = 'add_btns'>
      <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
      <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ['data'],
  data () {
    return {
      loading: false,
      dialogTitle: '参数设定',
      dialogFormVisible: false,
      metaTableList: [],
      sourceList: [],
      sourceObjectList: [{
        name: '',
        uid: '',
        type: ''
      }],
      columnList: [],
      actionList: [{
        label: 'max',
        value: 'max'
      }, {
        label: 'max_zero',
        value: 'max_zero'
      }, {
        label: 'min',
        value: 'min'
      }, {
        label: 'min_zero',
        value: 'min_zero'
      }, {
        label: 'avg',
        value: 'avg'
      }, {
        label: 'avg_zero',
        value: 'avg_zero'
      }, {
        label: 'abs',
        value: 'abs'
      }, {
        label: 'abs_zero',
        value: 'abs_zero'
      }, {
        label: 'count',
        value: 'count'
      }, {
        label: 'array',
        value: 'array'
      }],
      parameter: {
        source: '_meta_',
        param_name: '',
        table: '',
        as: '',
        join: '',
        action: '',
        column: '',
        filter: '',
        group: '',
        rowIndex: 0
      },
      rules: {
        source: [
          {required: true, message: '数据源不能为空', trigger: 'blur'}
        ],
        param_name: [
          {required: true, message: '参数名称不能为空', trigger: 'blur'}
        ],
        table: [
          {required: true, message: '表名不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.getMetaObjectList()
    this.getSourceList()
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.parameter = {
        source: '_meta_',
        param_name: '',
        table: '',
        as: '',
        join: '',
        action: '',
        column: '',
        filter: '',
        group: ''
      }
      Object.assign(this.parameter, this.data)
      if (this.parameter.source) {
        this.getTableData()
      }
      if (this.parameter.table) {
        this.getColumnList()
      }
    },
    changeSource (e) {
      if (e) {
        this.parameter.table = ''
        this.getTableData()
      }
    },
    changeTable (e) {
      if (e) {
        this.parameter.column = ''
        this.getColumnList()
      }
    },
    getMetaObjectList () {
      this.metaTableList = []
      this.loading = true
      this.$get('/metadata').then(data => {
        this.loading = false
        if (data.status === 200) {
          this.metaTableList = data.data.result
        } else {
          this.$message({
            type: 'error',
            message: data.statusText
          })
        }
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    getColumnList () {
      this.columnList = []
      if (this.parameter.source === '_meta_') {
        if (this.metaTableList) {
          for (let i = 0; i < this.metaTableList.length; i++) {
            let item = this.metaTableList[i]
            if (item.metaname === this.parameter.table) {
              item.columns.forEach((c, index) => {
                this.columnList.push({
                  name: c.column_name
                })
              })
              break
            }
          }
        }
      } else {
        this.loading = true
        let url = '/data_source/' + this.parameter.source + '/table/' + this.parameter.table + '/schema'
        let tableType = 'table'
        for (let i = 0; i < this.sourceObjectList.length; i++) {
          let item = this.sourceObjectList[i]
          if (item.name === this.parameter.table) {
            tableType = item.type
            break
          }
        }
        if (tableType === 'view') {
          url = '/data_source/' + this.parameter.source + '/view/' + this.parameter.table + '/schema'
        }
        this.$get(url).then(data => {
          this.loading = false
          let dataResult = data.data.result
          if (dataResult.code === 'success') {
            dataResult.data.forEach((c, index) => {
              this.columnList.push({
                name: c.column_name
              })
            })
          } else {
            this.$message({
              type: 'error',
              message: dataResult.msg
            })
            this.loading = false
          }
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      }
    },
    // 获取所有的元数据表
    getTableData () {
      this.sourceObjectList = []
      let self = this
      if (this.parameter.source === '_meta_') {
        this.metaTableList.forEach((item, index) => {
          self.sourceObjectList.push({
            uid: item.metauid,
            name: item.metaname,
            type: 'table'
          })
        })
      } else {
        this.loading = true
        this.$get('/data_source/' + this.parameter.source + '/allobjects').then(data => {
          let dataResult = data.data.result
          if (dataResult.code === 'success') {
            let sourceTableList_all = dataResult.data.table_list // 数据源表
            let sourceViewList_all = dataResult.data.view_list // 数据源视图
            sourceTableList_all.forEach((item, index) => {
              self.sourceObjectList.push({
                name: item.table_name,
                type: 'table'
              })
            })
            sourceViewList_all.forEach((item, index) => {
              self.sourceObjectList.push({
                name: item.view_name,
                type: 'view'
              })
            })
          } else {
            this.$message({
              type: 'error',
              message: dataResult.msg
            })
          }
          this.loading = false
        }).catch(error => {
          console.log(error)
          this.loading = false
        })
      }
    },
    getSourceList () {
      this.sourceList = []
      this.sourceList.push({
        SourceUID: '_meta_',
        SourceName: '元数据'
      })
      this.loading = true
      this.$get('/data_source/activelist').then(data => {
        this.loading = false
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.sourceList = dataResult.data
        } else {
          this.$message({
            type: 'error',
            message: dataResult.msg
          })
          this.loading = false
        }
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    // 点击弹窗的取消按钮
    resetForm () {
      this.$emit('operationReset')
    },
    closeDialog () {
      this.$emit('operationReset')
    },
    submitForm () {
      this.$emit('operationSuccess', this.parameter)
    }
  },
  watch: {
    'data.dialogFormVisible': {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.init()
        }
      },
      deep: true
    }
  }
}
</script>
